<template>
  <div class="app-container">
    <div>
      <BasicBusiness ref="basicBusinessRef" />
    </div>
    <div style="padding: 50px">
      <Step ref="stepRef" />
    </div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="170px"
      >
        <el-col :span="12">
          <el-form-item label="投标评审表是否申请" prop="isApplyBiddingApprove">
            <el-select
              v-model="formData.isApplyBiddingApprove"
              placeholder="请输入投标评审表是否申请"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in isApplyBiddingApproveOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否申请资质" prop="isApplyQua">
            <el-select
              v-model="formData.isApplyQua"
              placeholder="请输入是否申请资质"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in isApplyQuaOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否支付保证金" prop="isPayDeposit">
            <el-select
              v-model="formData.isPayDeposit"
              placeholder="请输入是否支付保证金"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in isPayDepositOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约模式" prop="signModel">
            <el-select
              v-model="formData.signModel"
              placeholder="请输入签约模式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in signModelOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="mini">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import BasicBusiness from "@/views/components/business/BasicBusiness.vue";
import Step from "@/views/components/business/Step.vue";
import { getProjectDetail, biddingApprove } from "@/api/project/index";
export default {
  components: { BasicBusiness, Step },
  props: [],
  data() {
    return {
      formData: {
        isApplyBiddingApprove: undefined,
        isApplyQua: undefined,
        isPayDeposit: undefined,
        signModel: undefined,
      },
      rules: {
        isApplyBiddingApprove: [
          {
            required: true,
            message: "请输入投标评审表是否申请",
            trigger: "change",
          },
        ],
        isApplyQua: [
          {
            required: true,
            message: "请输入是否申请资质",
            trigger: "change",
          },
        ],
        isPayDeposit: [
          {
            required: true,
            message: "请输入是否支付保证金",
            trigger: "change",
          },
        ],
        signModel: [
          {
            required: true,
            message: "请输入签约模式",
            trigger: "change",
          },
        ],
      },
      isApplyBiddingApproveOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isApplyQuaOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isPayDepositOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      signModelOptions: [
        {
          label: "直接签约",
          value: 1,
        },
        {
          label: "招标",
          value: 2,
        },
        {
          label: "作废",
          value: 3,
        },
      ],
    };
  },
  computed: {
    boId() {
      return this.$route.query.boId;
    },
    projectId() {
      return this.$route.query.projectId;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.basicBusinessRef.loadData(this.boId).then((res) => {});

      getProjectDetail(this.boId).then((res) => {
        ;
        this.stage = res.data.stage;
        this.$refs.stepRef.setStage(this.stage);
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单

        biddingApprove({
          ...this.formData,
          boId: this.boId,
          projectId: this.projectId,
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace('/bid/index');
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
